<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
<div id="app">
        <div 
            v-for="(item,i) in arry"
            @click="change(i)"
            :class="{active:i==index}">
            {{i}} {{item.type}}
        </div>

        <ul>
        <li v-for="sub in arry[index].subArry">
                    {{sub.text}}
        </li>
    </ul>
</div>

    <script src="js/vue.js"></script>

    <script>
        

        new Vue({
            el:"#app",
            data:{
                index:0,
                arry:[
                   {
                    type:"衣服",
                    subArry:[
                        {
                          id:1,
                          text:"运动衣"
                        },
                        {
                            id:2,
                            text:"棉衣"
                        }
                    ]
                   },
                   {
                    type:"裤子",
                    subArry:[
                        {
                          id:1,
                          text:"运动裤子"
                        },
                        {
                           id:2,
                            text:"短裤"
                        }
                    ] 
                   }
                ]
            },
            methods:{
                change(arg){

                    console.log(arg)
                    this.index=arg;

                }
            }
            

        })
    </script>
</body>
</html>